<template>
  <div class="ui-apptpl-template-list">
    <el-table
      :data="bannerCateItems"
      style="width: 100%">
      <el-table-column
        v-for="item in columns"
        v-bind="item"
      >
      </el-table-column>
      <el-table-column :label="action.label" :span="action.span" align="center">
        <template scope="scope">
          <!--<a href=""  v-for="itemActionactiontion.actions">{{itemAction.label}}</a>-->
          <el-button
            v-for="itemAction in action.actions"
            size="small"
            type="text"
            v-if="!itemAction.hidden || !itemAction.hidden(scope.row,scope.$index)"
            @click="itemAction.handler(scope.row,scope.$index)">{{itemAction.label}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pageInfo.total > pageInfo.size"
      @current-change="handlePageChange"
      :current-page="pageInfo.current"
      :page-size="pageInfo.size"
      layout="prev, pager, next"
      :total="pageInfo.total"></el-pagination>
  </div>
</template>
<script>
  import { Button, Table, TableColumn, Pagination } from 'element-ui'
  export default {
    props: {
      columns: {
        type: Array,
        default () {
          return []
        }
      },
      action: {
        type: Object,
        default: () => ({
          label: '操作'
        })
      },
      formData: {
        type: Array
      },
      pageInfo: {
        type: Object,
        default: () => ({
          total: 1,
          size: 20,
          current: 1
        })
      }
    },
    methods: {
      handlePageChange (...args) {
        this.$emit('page-change', ...args)
      }
    },
    computed: {
      bannerCateItems: {
        get () { return this.formData },
        set (value) {
          console.log(value)
        }
      }
    },
    mapComponents: {
      Button,
      Table,
      Pagination,
      TableColumn
    }
  }
</script>
